Appearance
标签篇
html
<!-- 注释文本 --> alt+/ alt+shift+A注释
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
...
<h6>六级标题</h6>
标题标签
<i>
倾斜
<em>
强调
<b>
加粗
<strong>
强调
<p>
段落
<span>
小段落
<br>
换行
<sup>
上标
<sub>
下标
<ul>
<li>
无序列表
<ol>
<li>
有序列表
<dl>
<dt>
<dd>
自定义列表
<a>
超链接
<img>
图片
<div>
空标签
<table>
<tr>
<td>
表格
<form>
<input>
表单
选择符篇
*
通配符
元素
元素选择符|类选择符
.class名
类选择符|class选择符
#id名
ID选择符
，
群组选择符
空格
后代选择符
>
子类选择符
txt
a:link {color: red;} /* 未访问的链接状态 */
a:visited {color: green;} /* 已访问的链接状态 */
a:hover {color: blue;} /* 鼠标滑过链接状态 */
a:active {color: yellow;} /* 鼠标按下去时的状态 */
a:focus{color: gray} /*元素获得鼠标焦点时的状态*/伪类选择器
::after :选择器在被选元素的内容后面插入内容
::before:伪元素在元素内容之前添加新内容。
::first-letter:定义对象内第一个字符的样式。
::first-line:定义对象内第一行的样式。
::selection:(c3)定义用户鼠标已选择内容的样式（background color）
伪对象选择符
属性篇
常用属性值
width:auto|length|%|inherit
min-width:length|%|inherit
max-width:none|length|%|inherit
宽度
height:auto|length|%|inherit
min-height:0|length|%|inherit
max-height:nonelength|%|inherit
高度
color
颜色
display:block|inline|none|inline-block|flex|inherit
框类型
background:color image repeat position attachment
背景
background-color
背景颜色
background-image
背景图片
background-repeat
背景重复
background-position
背景定位
background-attachment
背景固定
border
边框
font: font-style font-variant font-weight font-size/line-height font-family;
字体
font-style:normal|italic|oblique|inherit
字体倾斜
font-variant:normal|small-caps|inherit
小型大写字母
font-weight:normal|bold|bolder|lighter|100-900|inherit
字体加粗
font-size:medium|small|large|smaller|larger|length|%|inherit
字体尺寸
line-height:normal|number|length|%|inherit
行高
font-family:family-name
字体系列
text-align:left|center|right|justify|inherit
文本对齐
text-decoration:none|underline|overline|line-through|bink|inherit
文本修饰
text-indent:length|%|inherit
文本首行缩进
text-transform:none|capitalize|uppercase|lowercase|inherit
文本大小写
letter-spacing:normal|length|inherit
字符间距
word-spacing:normal|length|inherit
字符间距(中文无效)
white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit
文本空白符
list-style:list-style-type list-style-position list-style-image|inherit
列表标记 ↑
list-style-type：dise|none|circle|square|inherit
列表标记样式
list-style-position:outside|inside|inherit
列表标记位置
list-style-image:none|URL|inherit
列表标记图像
border:border-width border-style border-color|inherit
边框 #
border-width:medium|thin|thick|length|inherit
边框宽度 #
border-style:none|solid|hidden|dotted|dashed|double|inherit
边框样式 #
border-color:transparent|color_name|hex_number|rgb_number|inherit
边框颜色 #
padding:0px|auto|length|%
内边距
padding:0px|auto|length|%
外边距
float:none|left|right|inherit
浮动
position:static|relative|absolute|fixed|inherit
定位
top|bottom|left|right:auto|%|length|inherit
上下左右
z-index:auto↑|number|inherit
层叠关系
opacity: value|inherit
透明度
visibility: visible|hidden|collapse|inherit
透明度
overflow:visible|hidden|scroll|auto|inherit
overflow-x:visible|hidden|scroll|auto|inherit
overflow-y:visible|hidden|scroll|auto|inherit
内容溢出 #
text-overflow: clip|ellipsis|string